<script setup lang="ts">
import { ref } from 'vue';
import type { UploaderFileListItem } from 'vant';
import {updateUserInfoApi } from '@/api/user'
import UpdateAvatar from '@/components/updateAvatar/index.vue'
definePageMeta({
  layout: 'default-back',
  title: '个人资料',
  i18n: 'menu.person',
});
const userStore=useUserStore()
const router = useRouter()
const goBack = () => {
  router.go(-1)
}
const areaCode = ref('233')
const imageUrl = ref<string>('');
const showImage = ref<boolean>(false);
const showEditIcon = ref<boolean>(false);
const showImageViewer = ref<boolean>(false);

const afterRead = (file: UploaderFileListItem | UploaderFileListItem[]) => {
  if (Array.isArray(file)) {
    handleFile(file[0] as any);
  } else {
    handleFile(file);
  }
};
// 上传图片
const handleFile = (fileItem: UploaderFileListItem) => {
  if (fileItem.file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      imageUrl.value = e.target?.result as string;
      showImage.value = true;
      showEditIcon.value = true;
    };
    reader.readAsDataURL(fileItem.file);
  } else {
    console.error('上传的文件无效');
  }
};
// 删除图片
const deleteImage = () => {
  imageUrl.value = '';
  showImage.value = false;
  showEditIcon.value = false;
};
// 图片预览
const openImageViewer = () => {
  if (imageUrl.value) {
    showImageViewer.value = true;
  }
};
// 关闭图片预览
const closeImageViewer = () => {
  showImageViewer.value = false;
};
const onSubmit = () => {

  const params = { nickname:nickname.value ,avatar:imageUrl.value,uid:userStore.user.uid}
  updateUserInfoApi(params).then(res=>{
    if(res.code===0){
      showSuccessToast('修改成功！')
      goBack()
    }
  })
};
const nickname = ref('')
const columns = [
  { value: 1, text: '+86' },
  { value: 2, text: '+99' },
  { value: 3, text: '+88' },
  { value: 4, text: '+77' },
  { value: 5, text: '+66' },
  { value: 6, text: '+55' },
  { value: 7, text: '+44' },
];
const showPicker = ref(false)
const curLable = ref('')
// 弹窗选中的值
const handlePickerConfirm = (selectedValues: number[]) => {
  curLable.value = (columns.find(v => v.value == selectedValues[0]))!.text
}
onMounted(() => {
 nickname.value = userStore.user.nickname||''
 imageUrl.value = userStore.user.avatar||''
})
const open = ref(false)
const submitHandler = (v: string) => {
   imageUrl.value = v
  open.value = false
}
const openAvatar = () => {
  open.value = true
}
</script>
<template>
  <div class="w-full  p-15 pt-25 color-#fffefe">
    <van-form  required="auto" rounded-10>
      <div class="boxs relative w-full h-74 mt-43 mb-35" @click="openAvatar">
        <!-- 上传头像 -->
        <!-- <van-uploader v-if="!showImage" :after-read="afterRead" />
        <div v-else class="relative h-full box w-74">
          <img v-if="showImage" :src="imageUrl" class="avatar w-74 rounded-full" />
          <van-icon v-if="showEditIcon" name="edit" class=" text-white bg-black bg-opacity-50 rounded-full p-1"
            @click.stop="deleteImage" />
        </div> -->
       <!-- <div @click="openAvatar"> -->
        <img :src="'/imgs/head'+imageUrl+'.png'" class="w-74 h-74 bg-#303536 rounded-full"  />
       <!-- </div> -->
      </div>
      <div class="lable"> 用户名</div>
      <van-field v-model="nickname" name="nickname" :required="false" :border="false" placeholder="请填写用户名" :rules="[
        {
          validator: val => /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]+$/.test(val),
          message: '用户名必须是字母和数字的组合'
        }
      ]">
        <template #right-icon>
          <img src="/imgs/search_close.png" alt="" class="w-18" @click="nickname = ''" v-if="nickname">
        </template>
      </van-field>
     
    </van-form>
    <van-image-preview v-model:show="showImageViewer" :images="[imageUrl]" @close="closeImageViewer" />
    <div @click="onSubmit" class="btn w-full mx-auto py-10 text-center text-14 bg-#1475e0 rounded-5 mb-20 mt-60">确认
    </div>
    <UpdateAvatar v-model:visible="open"  @updateAvatar="submitHandler" />
    <!-- 更多弹窗 -->
    <GamePicker v-model:show="showPicker" :columns="columns" title="选择游戏" @confirm="handlePickerConfirm" />
  </div>
</template>
<style lang="css" scoped>
::v-deep .van-uploader__upload {
  border-radius: 50%;
  width: 72px;
  height: 72px;
  background: rgb(76, 76, 78);
}

::v-deep .box .van-icon {
  position: absolute;
  bottom: 5px;
  right: 9px;
  padding: 4px;

}

::v-deep .van-field__control {
  color: #ffffff;
}

::v-deep .van-field__left-icon {
  color: #ffffff;
}

::v-deep .van-field__label {
  color: #ffffff;
  width: 40px;
}


.lable {
  color: #aaafb0;
  margin-bottom: 13px;
  margin-top: 18px;
}

::v-deep .van-cell {
  line-height: 18px;
  background: #303536;
  border-radius: 6px;
  border: solid 1px rgba(255, 255, 255, 0.15);
}

.boxs {
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  /* margin-top: 10px; */
  position: absolute;
  right: 10px;
  border: solid 1px rgba(255, 255, 255, 0.15);
}
</style>